<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
        条件渲染：判断
        v-if="boolean变量或条件表达式"
        条件成立：渲染标签
        条件不成立：不渲染标签

        v-if
        v-else-if
        v-else
        -->
        <div>
            <div v-if="gender == '1'">男性</div>
            <div v-else-if="gender == '2'">女性</div>
            <div v-else-if="gender == '3'">保密</div>
            <div v-else>性别有误</div>
        </div>
        <!-- 
        v-if 条件成立渲染标签，条件不成立不渲染标签
        v-show 无论条件是否成立，都会渲染标签
                它是通过display:none样式控制标签的显示与隐藏
        -->
        <div v-show="flag">v-show指令</div>
    </div>
    <script src="./assets/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                message: 'hello vuejs',
                gender: '1',
                flag: true
            }
        });
    </script>
</body>
</html>